import React, {Component} from "react";
import {View, Text, StyleSheet, TouchableOpacity, Image, PixelRatio, Dimensions} from "react-native";
import {color} from "../../widget/color";
const {width} = Dimensions.get('window').width;
import PropTypes from 'prop-types';

export default class LoginTopTabBar extends Component {

    static propType = {
        goToPage: PropTypes.func,
        activeTab: PropTypes.number,
        tabs: PropTypes.array,
        tabNames: PropTypes.array,
    };

    componentDidMount() {
        // this.props.scrollValue.addListener(this.setAnimationValue);
    }

    setAnimationValue({value}) {
        console.log(value);
    }

    render() {
        return (
                <View style={styles.tabs}>
                    {this.props.tabs.map((tab, i) => {
                        let text_style = this.props.activeTab === i ? styles.select_tab : styles.un_select_tab;
                        let styleself = this.props.activeTab === i ? styles.select_underline : styles.un_select_underline;
                        return (
                            <TouchableOpacity
                                key={i}
                                onPress={()=>this.props.goToPage(i)}>
                                <Text style={text_style}>
                                    {this.props.tabNames[i]}
                                </Text>
                                <View style={styleself}/>
                            </TouchableOpacity>
                        )
                    })}
                </View>
        )
    }
}

const styles = StyleSheet.create({

    tabs: {
        width:width,
        // alignItems:'center',
        flexDirection:'row',
        justifyContent:'space-around',
    },
    underline_tabs: {
        width:width,
        alignItems:'center',
        flexDirection:'row',
        justifyContent:'space-around',
    },

    select_tab:{
        color:'rgba(219, 56, 64, 1)',
        fontWeight:'200',
        fontSize:14,
    },
    un_select_tab:{
        color:'#333333',
        fontWeight:'200',
        fontSize:14,
    },
    select_underline:{
        backgroundColor:'#DB3840',
        marginTop:9,
        height:2,
        width:81,
        marginLeft:2,
    },
    un_select_underline:{
        height:0,
    },


});

